<template>
	<view class='index'>
		<view class="topnavis">
			美食盲盒			  
		</view>
		<scroll-view  class="scollview" >																				
			<swiper
			  touchable="true"
			  acceleration="true"			  			 
			  class="swiper-box"
			  next-margin="260rpx"			  
			>
			  <swiper-item
			    class="swiperItem"
			    v-for="(item, index) in topBar"
			    
			    @click="goUnboxing(item.id)"
			  >
			    <image :src="item.url" mode="aspectFit" class="img"></image>
			  </swiper-item>
			</swiper>	    
		<view class="blindboxhistory">
			<navigator  class="history" url="">
				最近吃过				
			</navigator>
			<image  class="arrow" src="/static/home/main/details/arrow.png"></image>
			<view class="intro">吃完了留下你的评价吧！</view>
			
		</view>
		<scroll-view class="historylist" scroll-x="true" >
			<swiper 
			  touchable="true"
			  acceleration="true"			  			 
			  class="swiperlist"
			  next-margin="500rpx"		 
			>
			  <swiper-item
			    class="Item"
			    v-for="(item, index) in dishHistory"
			    
			    @click="goDetails(item.dish.id)"
			  >
			    <image :src="item.dish.image" mode="auto" class="listimg"></image>
				<view class="name">{{item.dish.name}}</view>
				<view class="restrt"> {{item.restaurant.name}}</view>
			  </swiper-item>
			</swiper>			
		</scroll-view>
		<view class="blindboxtrend">
			<navigator  class="trend" url="">
				我的菜单
				<image  class="arrow" src="/static/home/main/details/arrow.png"  ></image>
			</navigator>						
		</view>
		<scroll-view class="trendinglist" scroll-x="true">
			<swiper 
			  touchable="true"
			  acceleration="true"			  			 
			  class="swiperlist"
			next-margin="500rpx"
			>
			  <swiper-item
			    class="Item"
			    v-for="item in createdDishLists"			   
			    @click="goMenus(item.dishListId,item.name)"
			  >
			    <image :src="item.imageSrc" mode="auto" class="listimg"></image>
				<view class="name">{{item.name}}</view>				
			  </swiper-item>
			</swiper>			
		</scroll-view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {			
			return {				
						
				//顶栏跟随的索引id值
				scrollIntoIndex:'top0',
				//顶栏数据
				topBar:[
					{name:'1' ,  url:'/static/home/blind box/whatsnew.png',id:1},
					{name:'2' , url:'/static/home/blind box/favorite.png',id:2}					
				],				
				dataList:[	
				],
				dishHistory:[],
				createdDishLists:[],
				userid:0,
			}
		},
		components:{
		},
		onLoad() {	
<<<<<<< HEAD
			
=======
			const userInfo = uni.getStorageSync('userInfo');
			this.userid=userInfo.data.id
			this.showHistory()
			this.showHistory();
			const dishHistoryMap={};
			console.log("this.dishHistory")
			
			console.log(this.dishHistory);
										// 假设 dishHistoryMap 是一个空对象				
					this.dishHistory.forEach(item => {
								console.log(item); // 输出数组元素
								dishHistoryMap[item.dish.id] = item; // 使用 item.dish.id 作为键，item 作为值存储在 dishHistoryMap 中
							});
			
					console.log(dishHistoryMap)
			this.dishHistory=dishHistoryMap;
			this.dishHistory.reverse()
			
			
			 this.getCreatedDishLists();
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
			//uni.removeStorage({
			    //key: 'dishHistory',
			    //success: () => {
			      //console.log('历史记录已清空');
			    //},
			    //fail: (err) => {
			      //console.error('清空历史记录失败', err);
			    //}
			  //});
		 },		
		onShow(){
<<<<<<< HEAD
			const userInfo = uni.getStorageSync('userInfo');
			this.userid=userInfo.data.id
			this.showHistory()	
			this.getCreatedDishLists();
=======
			
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
		},
		methods:{					
		goUnboxing(id){
		uni.navigateTo({
		url:'../../pages/blindBox/blindBox?id='+id
				
		})
		console.log(id)						  
		}
		
		,goDetails(id){
			uni.navigateTo({
			url:'/pages/details/details?id='+id
		})
		}
		,goMenus(id,name){
			uni.navigateTo({
			url:"/pages/dishListDetail/dishListDetail?id="+id+"&name="+name,
		})
		},
		getDishCount(id) {
			const url = 'http://localhost:8080/preference/' + this.userid + '/getMenuDishes?menuId=' + id;
		
			return new Promise((resolve, reject) => {
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						const dishCount = res.data.data.length - 1;
						resolve(dishCount); // 使用 resolve 来传递异步操作的结果  
					},
					fail: (err) => {
						console.error(err);
						reject(err); // 使用 reject 来传递异步操作的错误  
					}
				});
			});
		},
		getCreatedDishLists() {
			const url = 'http://localhost:8080/preference/' + this.userid + '/getMenus';
			uni.request({
				url: url,
				method: 'GET',
				success: (res) => {
					/* console.log(res); */
					this.createdDishLists = [];
					// 遍历 res.data.data 数组  
					res.data.data.forEach(item => {
						// 获取对象的键和值  
						const keys = Object.keys(item);
						const dishListId = keys[0]; // 假设每个对象只有一个键  
						const name = item[dishListId];
		
		
						this.getDishCount(dishListId)
							.then(dishCount => {
								const url2 =
									'http://localhost:8080/preference/getMenuImage/' + this
									.userid + '?menuId=' + dishListId;
								uni.request({
									url: url2,
									method: 'GET',
									success: (res2) => {
										const menuImage = res2.data;
										const newDish = {
											dishListId: dishListId,
											name: name,
											dishCount: dishCount,
											imageSrc: menuImage,
											toBeDeleted: false,
										};
										/* console.log(newDish); */
										this.createdDishLists.push(newDish);
									}
								});
							})
							.catch(error => {
								console.error('An error occurred:', error);
							});
		
					});
		
		
				},
				fail: (err) => {
					console.error(err);
					// 在这里处理请求失败的逻辑
				}
			});
		},
		   showHistory() {
		      // 读取本地存储中的历史记录
		      uni.getStorage({
		        key: 'dishHistory',
		        success: (res) => {
		   					console.log("读取成功")
		          this.dishHistory = (res.data || []).reverse();
		        },
		        fail: (err) => {
		        console.error('读取历史记录失败', err);		          
		        }
		      });
		    }
		}
		
			
}	
</script>
<style lang="scss" scoped>
.index {
	height:1560rpx;
	display: flex;
	flex-direction: column;
    background-color: #e1e1e1;    
    .topnavis {
    font-size: 40rpx;
    color: #000000;    
    margin-left: 5vw;
	margin-top: 4vh;
    }
    .scollview {
    width: 100%;
	display: flex;
	flex-direction: column;
	.swiper-box {	  
	  width: 100%;
	  height: 500rpx;
	  overflow: hidden;
	  margin-top: 2vh;
	  .swiperItem {
		  margin-left: 30rpx;
	    height: 550rpx;
	    width: 550rpx;
	  }
	  .img {
	    width:450rpx;
		height:450rpx;
	  }
	}
	.blindboxhistory{
		margin-left: 5vw;
		margin-top: 1vh;
		display: flex;
		flex-direction: row;
		.history {			
		  color: #000000;
		  font-size: 40rpx;		  		  						
		}
		.arrow {
			margin-top: 15rpx;
		  width: 30rpx;
		  height: 30rpx;
		 transform: rotate(180deg);		
		}
		.intro{	
			margin-left: 2vw;
			margin-top: 12rpx;
			color: #808080;
			font-size: 25rpx;
		}
	}
	.historylist {
		margin-top: 1vh;
		margin-left: 5vw;
	    height: 325rpx;	    
		.swiperlist {
		  height: 400rpx;
			.Item {
			  height: 300rpx;
			  .listimg {
			    width: 220rpx;
			    height: 220rpx;	
				border-radius: 20rpx;
			  }			  
			}
			.name {
			  font-size: 25rpx;			  		      
			}
			.restrt {			 
			  font-size: 20rpx;
			  color: grey;			 			  
			}
		}
	  }
	  .blindboxtrend {
		  margin-top: 2vh;
		margin-left: 5vw;
		width: fit-content;
		display: flex;
		flex-direction: row;
	    font-size: 40rpx;	    	    	    
	    .arrow {
	    	  width: 30rpx;
	    	  height: 30rpx;
			 transform: rotate(180deg);
	    }
	  }
	  .trendinglist {
		  margin-top: 1vh;
		  margin-left: 5vw;
	      height: 300rpx;	      
	  	.swiperlist {
	  	  height: 300rpx;
	  		.Item {
	  		  height: 400rpx;
	  		  .listimg {
	  		    width: 220rpx;
	  		    height: 220rpx;	
	  		    border-radius: 20rpx;  		    
	  		  }
			  .name {
			  font-size: 25rpx;	  		      		      
			  }
	  		}
	  	}		
	 }
	}	
  }


</style>
